import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
    ListView,
    ActivityIndicator,
    TouchableOpacity,
} from 'react-native';
import Common from '../common/constants';
import { List, WhiteSpace, Stepper, InputItem, Item, WingBlank, } from 'antd-mobile';
import { fetchTicketInfo } from '../actions/ticketAction';
import { alipay } from '../actions/alipayAction';

import LoginContainer from '../containers/LoginContainer';
import RegisterContainer from '../containers/RegisterContainer';



export default class Buy extends React.Component{

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
            sectionHeaderHasChanged: (section1, section2) => section1 !== section2,
            getSectionHeaderData: (data, sectionID) => {
                return data[sectionID];
            },
        });
        this.state = {
          dataSource: ds,
          count : 1,
        };
    }

    componentWillMount() {
        const {dispatch} = this.props;
        dispatch(fetchTicketInfo(this.props.id));
    }

    onChange(count) {
        this.setState({ count });
    }

    //名称信息
    _nameinfo(rowData) {
        return (
            <View>
              <WhiteSpace size="lg" />
              <WingBlank><Text style={styles.title}>{rowData.name}</Text></WingBlank>
              <WhiteSpace size="lg" />
            </View>
        );
    }

    //数量信息
    _countinfo(rowData) {
        return (
            <View>
              <List>
                <List.Item extra={<View style={styles.countstepper}><Stepper
                    max={10}
                    min={1}
                    value={rowData.count}
                    onChange={this.onChange.bind(this)}
                  /></View>}>购买数量</List.Item>
              </List>
              <WhiteSpace size="lg" />
            </View>
        );
    }

    //用户信息
    _userinfo(rowData) {
        return (
          <View>
            <List>
              <InputItem placeholder="请输入用户名" type="text">
                买家姓名
              </InputItem>
              <InputItem placeholder="请输入联系方式" type="text">
                联系方式
              </InputItem>
            </List>
            <WhiteSpace size="lg" />
          </View>
        );
    }

    //购买须知
    _noteinfo(rowData) {
        return (
            <View>
              <WhiteSpace size="lg" />
              <WingBlank><Text style={styles.title}>{rowData.txt}</Text></WingBlank>
              <WhiteSpace size="lg" />
            </View>
        );
    }


    _renderdata(rowData, sectionID, rowID) {

        if(sectionID == 'nameinfo'){
            return this._nameinfo(rowData);
        }else if(sectionID == 'countinfo'){
            return this._countinfo(rowData);
        }else if(sectionID == 'userinfo'){
            return this._userinfo(rowData);
        }else if(sectionID == 'noteinfo'){
            return this._noteinfo(rowData);
        }else{
            return (<Text>{rowData}</Text>);
        }
    }

    _gogo() {
        let data = {
          "sale_code":this.props.buyReducer.ticketInfo.code,
          "payment_type":'0',
          "cardno":'210302198308022412',
          "mobile":'13840188285',
          "name":'dlq',
          "num":1,
        };
        this.props.dispatch(alipay(data));
    }

    render(){

      console.log('buy render');
      console.log(this.props);

      let { ticketInfo, getting } = this.props.buyReducer;
      console.log(ticketInfo);

      let sourceData = {
          'nameinfo' : [{
              'name' : ticketInfo.name, 
          }],
          'countinfo' : [{
              'count' : this.state.count,
          }],
          'userinfo' : [{
              'name' : 'dlq',
              'tel'  : '13840188285',
          }],
          'noteinfo' : [{
              'txt' : '预定须知内容',
          }],
      };

      

        return (
            <View style={styles.m}>
              {getting ? <ActivityIndicator size="large" /> : 
                <View style={styles.main}>
                  <View style={styles.content}>
                      <ListView
                        automaticallyAdjustContentInsets={false}
                        renderRow={this._renderdata.bind(this)}
                        dataSource={this.state.dataSource.cloneWithRowsAndSections(sourceData)}
                      />
                  </View>


                  <View style={styles.pay}>
                    <View style={styles.price}><Text>{ticketInfo.guide_price * 0.01 * this.state.count}</Text></View>
                    <TouchableOpacity style={styles.gogo} 
                      onPress={this._gogo.bind(this)}>
                        <Text >立即支付</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              }
              
            </View>
        );
    }
}

const styles = StyleSheet.create({

    m : {
      marginTop :  65,
    },

    main : {
        //marginTop : 65,
        //flexDirection: 'column',
        height : Common.window.height - 65,
        //height : Common.window.height,
        //minHeight : Common.window.height - 340,
        //flex: 1,
        //flexDirection: 'row',
        //display: 'flex',
        //justifyContent : 'flex-end',
        //justifyContent : 'space-between',
        //alignContent : 'center',
    },

    ttt : {
        height:100,
    },

    content : {
        flex: 1,
        //height : Common.window.height - 115,
        //height : Common.window.height - 50,
        //backgroundColor : 'green',
        //overflow: 'hidden',
    },

    title : {
        fontSize : 18,
        //padding : 5,
    },

    count : {
        flexDirection: 'row',
        justifyContent : 'space-between',
    },

    counttxt : {
      flex : 1,
    },

    countstepper : {
      width : 120,
    },

    pay : {
        height : 50,
        //backgroundColor : 'red',
        flexDirection: 'row',
        //justifyContent : 'space-between',
        //alignSelf: 'flex-end',
        //width : 100,
        //flex: 1,
        borderTopWidth : 1,
        borderTopColor : 'red',

    },

    pay1 : {
        
    },

    price : {
        flex : 1,
        justifyContent : 'center',
        alignItems : 'center',

    },

    gogo : {
        flex : 1,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor : 'yellow',
    },

})